// JavaScript Document
//@require Class.js

Brujula = new MyClass({
	/**  
     * Property: coordenadaPos
     * {Integer} 
     */
	coordenadaPos: 0, //'N'
	
	/**  
     * Property: imagesURL
     * {String}
     */
	imagesURL: 'js/tablero/images/', 
	/** 
     * Property: display
     * {DOMElement} 
     */
	display: null, 
	/** 
     * SIZE of DISPLAY
     */
	width: '90px',
	height: '90px',
	/** 
     * Property: indicador
     * {DOMElement: img} 
     */
	aguja: null, 
	agujaWidth: '2160px',
	/** 
     * Property: coordenadasValues
     * {Array} 
     */
	coordenadasValues : null, 
	/** 
     * Property: animationTimeOut
     * {Integer} 
     */
	animationTimeOut: null,
	/** 
     * Property: agujaFrames
     * {Integer} 
     */
	agujaFrames: 0,

	init: function(imagesURL){
		if (imagesURL!=null)
			this.imagesURL = imagesURL;
		this.revolucion = 0;
		this.display = document.createElement("div");
		with (this.display.style){
			width = this.width;
			height = this.height;
			background = "transparent url("+this.imagesURL+"brujula.gif) no-repeat center";
		}
		this.aguja = document.createElement("div");
		with (this.aguja.style){
			width = this.width;
			height = this.height;
			background = "transparent url("+this.imagesURL+"agujaBrujula.gif) no-repeat";			
		}
		this.display.appendChild(this.aguja);
		//calculo las posiciones de las coordenadas e inicializo el array.
		//maneja 8 coordenadas
		this.agujaFrames = Math.round(parseInt(this.agujaWidth)/parseInt(this.width));
		var framesInterval = this.agujaFrames/8;
		this.coordenadasValues = new Array();
		this.coordenadasValues['N']=0;
		this.coordenadasValues['NE']=this.coordenadasValues['N']+framesInterval;
		this.coordenadasValues['E']=this.coordenadasValues['NE']+framesInterval;
		this.coordenadasValues['SE']=this.coordenadasValues['E']+framesInterval;
		this.coordenadasValues['S']=this.coordenadasValues['SE']+framesInterval;
		this.coordenadasValues['SO']=this.coordenadasValues['S']+framesInterval;
		this.coordenadasValues['O']=this.coordenadasValues['SO']+framesInterval;
		this.coordenadasValues['NO']=this.coordenadasValues['O']+framesInterval;
	},
	
	/** 
     * Method: putDisplayIn
     *  
     * Parameters:
     * idElement - {String} 
     */
	putDisplayIn: function(idElement){
		document.getElementById(idElement).appendChild(this.display);
	},
	
	/** 
     * Method: setValue
     *  
     * Parameters:
     * coordinate - {String: 'N, NE, E ,SE, S, SO, O, NO'} 
     */
	setValue: function(coordinate) {		
		coordinate = coordinate.toUpperCase();
		value = this.coordenadasValues[coordinate];
		var offsetX = (-1) * value * parseInt(this.width);
		var backgroundPosition = offsetX+'px 0px';	
		this.aguja.style.backgroundPosition = backgroundPosition;
		this.coordenadaPos = value;
		this.generateTooltip();
	},
	
	/** 
     * Method: moveToValue
     *  
     * Parameters:
     * value - {Integer} 
     */
	moveToValue: function(coordinate) {
		if(this.animationTimeOut!=null)
			clearTimeout(this.animationTimeOut);
		coordinate = coordinate.toUpperCase();
		var fromValue = this.coordenadaPos;
		var toValue = this.coordenadasValues[coordinate];
		var inc = true;
		var value = fromValue;
		if ((fromValue>toValue)&&((fromValue-toValue)<(this.agujaFrames/2)))
			inc = false;
		if ((fromValue<toValue)&&((toValue-fromValue)>(this.agujaFrames/2)))
			inc = false;		
		var me = this;
		var f=function animated(){
			if(inc){
				value++;
				if (value > (me.agujaFrames-1))
					value = 0;
				}
			else{
				value--;
				if (value < 0)
					value = me.agujaFrames-1;
				}
			//setValuePos................................................
			var offsetX = (-1) * value * parseInt(me.width);
			var backgroundPosition = offsetX+'px 0px';		
			me.aguja.style.backgroundPosition = backgroundPosition;
			me.coordenadaPos = value;
			me.generateTooltip();
			//...........................................................						
			if (value!=toValue)
				me.animationTimeOut=setTimeout(f,80);
		}
		if (value!=toValue)
			this.animationTimeOut=setTimeout(f,80);
	},
	
	/** 
     * Method: getCoordinate
     *  
	 * Retorna la coordenada actual o null en caso que no este definida la coordenada.
     */
	 getCoordinate: function(){
		 for(var indice in this.coordenadasValues) {  
      		if(this.coordenadasValues[indice] == this.coordenadaPos)
				return(indice);
    	 }
		 return(null);
	 },
	 
	/** 
     * Method: generateTooltip
	 *   Formatea e inserta el tooltip (title) al componente actual
     * Parameters:
     * 	toValue - {Integer} 
     */
	generateTooltip: function(){
		var texto = 'SENTIDO: \n ';
		texto += this.getCoordinate();	
		this.display.title = texto;
	}
	
});